<template>
	<div class="leftBottom">
		<div class="title">
			<span class="word">场景需求:节能、舒适</span>
			<div class="block">
				<el-date-picker
					v-model="value1"
					type="daterange"
					range-separator="To"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					size="small"
				/>
			</div>
		</div>
		<div class="line"></div>
		<div>
			<el-table
				:data="
					tableData.data.slice(
						(currentPage - 1) * pagesize,
						currentPage * pagesize
					)"
				stripe
				style="width: 100%">
				<el-table-column type="index" label="序号" width="50" />
				<el-table-column prop="time" label="日期" width="100" />
				<el-table-column prop="need" label="需求内容" />
				<el-table-column prop="level" label="级别" width="50" />
			</el-table>
		</div>
		<div class="page">
			<div class="example-pagination-block">
				<el-pagination
					layout="prev,pager,next"
					:page-size="pagesize"
					:total="tableData.total"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
				/>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps } from "vue";
var currentPage = ref(1);
var pagesize = ref(3);
const value1 = ref("");
const tableData = reactive({
	data: [],
	total: 0,
});
const props = defineProps({
	demand: String,
});
onMounted(() => {
	tableData.data = JSON.parse(props.demand);
	tableData.total = JSON.parse(props.demand).length
});


function handleCurrentChange(Page) {
	//页码更改方法

	currentPage.value = Page;
}
</script>

<style scoped lang="less">
.leftBottom {
	width: 100%;
	border-style: none;
	border-color: unset;
	box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
	border-radius: 8px;
	font-size: 14px;
	padding: 0px;
	line-height: 20px;
	font-weight: normal;
	font-style: normal;
	background-color: white;

	.title {
		padding: 15px;
		display: flex;
		position: relative;
		.word {
			font-family: SourceHanSansSC;
			font-weight: 550;
			font-size: 18px;
			color: rgb(77, 98, 165);
			font-style: normal;
			letter-spacing: 2px;
			line-height: 28px;
			text-decoration: none;
			margin-bottom: 15px;
			margin-top: 15px;
		}
	}
	.line {
		border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
		margin-bottom: 10px;
	}
	.page {
		padding: 15px 0;
		margin-top: 15px;
	}
	.block {
		// width: 200px;
		margin-left: 20px;
		margin-top: 15px;
	}
}
</style>
<style>
.example-pagination-block + .example-pagination-block {
	margin-top: 10px;
}
.example-pagination-block .example-demonstration {
	margin-bottom: 16px;
}
.el-table tr {
	background-color: rgb(246, 250, 255);
}

.demo-date-picker {
	display: flex;
	width: 100%;
	padding: 0;
	flex-wrap: wrap;
}
.el-date-editor--daterange.el-input__inner {
	width: 230px;
}
.demo-date-picker .block {
	padding: 30px 0;
	text-align: center;
	border-right: solid 1px var(--el-border-color);
	flex: 1;
}
.demo-date-picker .block:last-child {
	border-right: none;
}
.demo-date-picker .demonstration {
	display: block;
	color: var(--el-text-color-secondary);
	font-size: 14px;
	margin-bottom: 20px;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
	border-bottom: none;
}
</style>
